<!DOCTYPE html>
<html>
<head>
	<title>定时器进度条</title>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
	<!-- 方法一：直接将加载的div写在body里面 -->
	<!-- <div class="loading">
		<div class="pic"></div>
	</div> -->
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503151143208&di=355a30c17553cde0727f833424c72d80&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1029%2Fzyz%2F03%2F14583115_1350966109847.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503151034724&di=ad3c8d6fd80813bb35ba6dbe62c1103c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D4e3e0e04b4096b6395145613645aed31%2Ff7246b600c338744af80e6575b0fd9f9d72aa050.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503151143208&di=614d4a3eb3cc95985d97d5219e811709&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140826%2F267848-140R60T34860.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503151143207&di=027d165f94b8e9d6cec0f822826c8e72&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F110920%2F2443-1109200TK99.jpg" alt="">

	<script type="text/javascript">
		$(function () {
			// 方法二：通过函数将div写在body里面 
			var loading = '<div class="loading"><div class="pic"></div></div>';
			$('body').append(loading);
			//定时器
			setInterval(function () {
				$('.loading').fadeOut();
			},3000);
		})
	</script>

	<style type="text/css">
		.loading {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background: #fff;
		}
		.loading .pic {
			width: 64px;
			height: 64px;
			background: url(images/loading.gif);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	</style>

</body>
</html>